<template>
  <a-layout class="logincontent">
    <a-form
      class="loginform"
      :model="user"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
     <a-typography-title style="text-align:center">用户注册</a-typography-title>
      <a-form-item label="账号" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input v-model:value="user.cust_username" />
      </a-form-item>

      <a-form-item label="密码" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input-password v-model:value="user.password" />
      </a-form-item>
      <a-form-item label="确认密码" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input-password v-model:value="user.confirm_password" />
      </a-form-item>
      <a-form-item label="电话" :wrapper-col="{ span: 15, offset: 4 }">
        <a-input v-model:value="user.phone_number" @keyup.enter="register"/>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 15, offset: 8 }">
        <a-row type="flex" justify="space-between">
          <a-button type="primary" @click="register">确认注册</a-button>
          <a-button type="primary" @click="cancel">返回</a-button>
        </a-row>
      </a-form-item>
    </a-form>
  </a-layout>
  
</template>
<script setup>
import { reactive } from "vue";
import { post, setLocalToken, tip, get } from "@/common";

import { useRouter } from "vue-router";

const router = useRouter(); //获取用户路由

//reactive 用于双向绑定响应
const user = reactive({
  cust_username: "",
  password: "",
  confirm_password:"",
  phone_number:"",
});

const register = () => {
  console.log("注册");
  //then方法仅接收成功操作的结果
  
  post("/security/register", user).then((res) => {
    console.log(res);

    tip.success("注册成功，请登录！");

    const token = res.data; //获取返回的令牌
    
    router.push({ path: "/login" });
  });

  
};

const cancel = () => {
  //跳转至home路由
  router.push({ path: "/login" });
};




//一行24列
const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 10,
};
</script>

<style>
.logincontent {
  display: flex;
  flex-direction: column;
  background-image: url("loginbac.png");
  background-size:100% 100% ; 
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 1000px;

  justify-content: center;
  align-items: center;
}
.loginform {
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>